<template>
  <div class="my-task">
    <my-header>
      <div class="header-box">
        <router-link to="/my">
          <div class="jiantou"></div>
        </router-link>
        <span>我的任务</span>
      </div>
    </my-header>
    <van-tabs v-model="active" color="#faca2a" animated line-width="40%">
      <van-tab title="未完成">
        <div class="task-list">
          <ul>
            <li
              v-for="(item,index) in unFinishArr"
              :key="item.task_id"
              :id="item.task_id"
              :class="`selection${index}`"
              @click="chooseTask(index)"
            >
              <div class="left">
                <div class="image">
                  <img :src="`${item.imgUrl}`" alt />
                </div>
              </div>
              <div class="right">
                <div class="right-header">
                  <p>
                    {{item.title}}
                    <span>+{{item.price}}</span>
                  </p>
                </div>
                <div class="right-bottom">
                  <span class="type">{{item.classify}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <van-empty v-if="isShow" description="没有未完成任务" />
      </van-tab>
      <van-tab title="已完成">
        <div class="task-list">
          <ul>
            <li v-for="item in finishArr" :key="item.task_id" :id="item.task_id">
              <div class="left">
                <div class="image">
                  <img :src="`${item.imgUrl}`" alt />
                </div>
              </div>
              <div class="right">
                <div class="right-header">
                  <p>
                    {{item.title}}
                    <span>+{{item.price}}</span>
                  </p>
                </div>
                <div class="right-bottom">
                  <span class="type">{{item.classify}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import MyHeader from "../components/MyHeader.vue";
import axios from "axios";
import { mapState } from "vuex";
import { baseURL } from "../http/require";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);

export default {
  components: { MyHeader },
  watch: {
    user: {
      deep: true,
      immediate: true,
      handler(n, o) {
        // console.log({n});
      }
    }
  },
  data() {
    return {
      active: 0,
      finishArr: [],
      unFinishArr: [],
      imgUrl: "",
      isShow: true
    };
  },
  methods: {
    getMyTask() {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });
      axios
        .get(`${baseURL}/myTask/myTaskList?id=${this.user.id}`)
        .then(response => {
          if (response.data.code == 200) {
            Toast.clear();
            let data = response.data.rows;
            // console.log(data);
            data.forEach(item => {
              if (item.isFinish == "false") {
                axios
                  .get(`${baseURL}/task/myTaskList?taskId=${item.taskId}`)
                  .then(response => {
                    let [arr] = response.data.rows;
                    this.unFinishArr.push(arr);
                    // console.log(this.unFinishArr);
                    if (this.unFinishArr.length != 0) {
                      this.isShow = false;
                    } else {
                      this.isShow = true;
                    }
                    this.unFinishArr.forEach(item => {
                      switch (item.classify) {
                        case "下载专区":
                          this.imgUrl = `${baseURL}/static/image/download.png`;
                          item["imgUrl"] = this.imgUrl;
                          break;
                        case "点赞专区":
                          this.imgUrl = `${baseURL}/static/image/like.png`;
                          item["imgUrl"] = this.imgUrl;
                          break;
                        case "砍价专区":
                          this.imgUrl = `${baseURL}/static/image/kanjia.png`;
                          item["imgUrl"] = this.imgUrl;
                          break;
                      }
                    });
                  });
              } else {
                // console.log(`${baseURL}/task/myTaskList?taskId=${item.taskId}`);
                axios
                  .get(`${baseURL}/task/myTaskList?taskId=${item.taskId}`)
                  .then(response => {
                    if(response.data.code == 200) {
                      Toast.clear()
                    let [arr] = response.data.rows;
                    this.finishArr.push(arr);
                    // console.log(this.finishArr);
                    this.finishArr.forEach(item => {
                      switch (item.classify) {
                        case "下载专区":
                          this.imgUrl = `${baseURL}/static/image/download.png`;
                          item["imgUrl"] = this.imgUrl;
                          break;
                        case "点赞专区":
                          this.imgUrl = `${baseURL}/static/image/like.png`;
                          item["imgUrl"] = this.imgUrl;

                          break;
                        case "砍价专区":
                          this.imgUrl = `${baseURL}/static/image/kanjia.png`;
                          item["imgUrl"] = this.imgUrl;
                          break;
                      }
                    });
                    }
                    
                  });
              }
            });
          }
        });
    },
    chooseTask(index) {
      const selection = document.querySelector(`.selection${index}`);
      let taskId = selection.getAttribute("id");
      // console.log(taskId);
      this.$store.dispatch("task/setTaskIdAsync", taskId);
      this.$router.push("/taskDetail2");
    }
  },
  computed: {
    ...mapState(["user"])
  },

  created() {
    this.getMyTask();
  }
};
</script>
<style lang="scss" scoped>
@import "../css/reset.css";
.my-task {
  width: 100%;
  .header-box {
    width: 100%;
    display: flex;
    align-items: center;
    a {
      display: block;
      .jiantou {
        flex-grow: 1;
        width: 15px;
        height: 15px;
        border-left: 3px solid #fff;
        border-top: 3px solid #fff;
        transform: rotate(320deg);
        margin-left: 15px;
      }
    }
    span {
      flex-grow: 1;
    }
  }
  .task-list {
    width: 100%;
    ul {
      width: 100%;
      background-color: #fff;
      li {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: center;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        .left {
          flex-grow: 0.3;
          height: 100%;
          .image {
            width: 65px;
            height: 65px;
            line-height: 65px;
            margin: 0 auto;
          }
          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
        .right {
          flex-grow: 2;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          line-height: 200%;
          p {
            font-size: 18px;
            position: relative;
            span {
              position: absolute;
              right: 10px;
              color: red;
              font-weight: 600;
            }
          }
          .type,
          .num {
            font-size: 12px;
            background-color: #ccc;
            padding: 3px 3px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
